<template>
  <el-dialog :title="title" :width="width" :visible.sync="isShowVisible" center :close-on-click-modal="false" :before-close="() => $emit('notRefresh')">
    <el-form label-width="125px" :model="materialData" ref="materialData" :rules="rules" style="min-height:24vw" v-loading="isLoading">
      <el-tabs v-model="activeName">
        <el-tab-pane name="base"> <span slot="label"><i class="el-icon-date"></i> 基本资料</span>
          <el-card>
            <el-row>
              <el-col :span="8">
                <el-form-item label="物料编码:" prop="fnumber">
                  <el-input v-model="materialData.fnumber" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物料名称:" prop="fname" id="fname">
                  <el-input v-model="materialData.fname" :disabled="isview"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="物料简称:" prop="fsimplename" id="fsimplename">
                  <el-input v-model="materialData.fsimplename" :disabled="isview"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="物料分类:" prop="fgroupId">
                  <el-select class='fullWidth' v-model="materialData.fgroupid" filterable placeholder="请选择" disabled>
                    <el-option v-for="item in groupTreeData" :key="item.nodeId" :label="item.nodeName" :value="item.nodeId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="物料属性:" prop="ftype" id="ftype">
                  <tie-enum v-if="!isLoading" v-model="materialData.ftype" :status="status" className="cn.hxlc.tie.demo.core.enums.MaterialTypeEnum"></tie-enum>
                </el-form-item>
              </el-col>

            <el-col :span="8">
                <el-form-item label="颜色:" prop="fcolorid" class='fullWidth'>
                  <el-select v-model="materialData.fcolorid" filterable placeholder="请选择" :disabled="isview">
                    <el-option v-for="item in colorData" :key="item.fid" :label="item.fname" :value="item.fid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

<el-row>
  
</el-row>
<!-- <vxe-table border
                show-overflow
                highlight-hover-row
                stripe
                resizable
                ref="xTable1"
                class="my_table_insert"
                max-height="300"
                :data="maPackData.entry"
                :auto-resize="true"
                :edit-rules="dpRules"
                :edit-config="dpConfig">
              <vxe-table-column type="checkbox" width="60"></vxe-table-column>
              <vxe-table-column field="dpId" title="部门编号"  :edit-render="{type: 'default'}">
                  <template v-slot:edit="subscope">
                    <inputSelect v-model="subscope.row.dpId" :f7Param="dpMaterialF7Param" 
                    :loadShow="subscope.row.dpId" 
                    title="部门信息表"
                    @onF7DaTaSelected="onF7DpMaterialSelectChanged"></inputSelect>
                    </template>
                    <template v-slot="{ row }"> 
                    {{row.dpId}}
                    </template>

              </vxe-table-column>
              <vxe-table-column field="dpName" title="部门名称" ></vxe-table-column>
              <vxe-table-column field="dpFunction" title="部门职责" ></vxe-table-column>
              <vxe-table-column field="dpNumber" title="部门人数"></vxe-table-column>
              <vxe-table-column field="funitid" title="计量单位"  :edit-render="{name: '$select', options : unitList}"></vxe-table-column>
</vxe-table> -->


          </el-card>
        </el-tab-pane>
        <el-tab-pane name="setting">
          <span slot="label"><i class="el-icon-setting"></i> 配置</span>
          <!-- <el-card>
            <el-row>
              <el-col :span="8">
                <el-form-item label="启用保质期:" required>
                  <el-radio-group v-model="materialData.fisuseShelfLife" :disabled="isview" @change="fisuseShelfLifeChanged">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保质期:">
                  <el-input v-model="materialData.fshelfLife" :disabled="isview"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="保质期单位:">
                  <mdm-unit-select v-if="!isLoading" v-model="materialData.fshelfLifeUnitid" :status="status" :filter="shelfLifeUnitFilter"></mdm-unit-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="启用辅助属性:" required>
                  <el-radio-group v-model="materialData.fisuseAuxProperty" :disabled="isview" @change="fisuseAuxPropertyChanged">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="辅助属性:">
                  <el-input v-model="materialData.fauxProperty" :disabled="isview || materialData.fisuseAuxProperty==0"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="启用批号:" required>
                  <el-radio-group v-model="materialData.fuselot" :disabled="isview">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="启用序列号:" required>
                  <el-radio-group v-model="materialData.fusesn" :disabled="isview" @change="usesnChange">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="序列号单位:">
                  <el-select v-model="materialData.fsnunitid" style="width:100%" filterable :disabled="isview || !materialData.fusesn" clearable>
                    <el-option v-if="materialData.fbaseunitid!=null" :value="materialData.fbaseunitid" :key="materialData.fbaseunitid" :label="materialData.fbaseunitname">
                    </el-option>
                    <el-option v-if="materialData.fauxunitid!='' && materialData.fauxunitid!=null && materialData.fauxunitid!=materialData.fbaseunitid" :value="materialData.fauxunitid" :key="materialData.fauxunitid" :label="materialData.fauxunitname">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="是否包材:" required>
                  <el-radio-group v-model="materialData.fispackage" :disabled="isview">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否免检:" required>
                  <el-radio-group v-model="materialData.fisavoidcheck" :disabled="isview">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="wms自有物料:" required>
                  <el-radio-group v-model="materialData.fishave" :disabled="isview">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card> -->
        </el-tab-pane>
        <el-tab-pane name="stock">
          <span slot="label"><i class="el-icon-folder"></i> 库存资料</span>
          <!-- <el-card>
            <el-row>
              <el-col :span="12">
                <el-form-item label="默认仓库:" prop="fwarehouseid">
                  <mdm-warehouse v-if="!isLoading" v-model="materialData.fwarehouseid" ref="warehouse" :loadShow="materialData.fwarehousename" :disabled="isview" @change="onWarehouseChange"></mdm-warehouse>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="默认库区:" prop="fwareareaid">
                  <mdm-warearea v-if="!isLoading" v-model="materialData.fwareareaid" ref="warearea" :loadShow="materialData.fwareareaname" :disabled="isview" @change="onWareareaChange"></mdm-warearea>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="默认库位:" prop="flocationid">
                  <mdm-waresite v-if="!isLoading" v-model="materialData.flocationid" ref="location" :loadShow="materialData.flocationname" :disabled="isview" @change="onLocationChange"></mdm-waresite>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card> -->
        </el-tab-pane>
        <el-tab-pane name="other">
          <span slot="label">其他</span>
          <!-- <el-card>
            <el-row>
              <el-col :span="12">
                <el-form-item label="创建人:" prop="creatorName">
                  <el-input v-model="materialData.creatorName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间:" prop="fcreatetime">
                  <el-date-picker v-model="materialData.fcreatetime" type="date" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" disabled>
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="最后修改人:" prop="lastupdateuserName">
                  <el-input v-model="materialData.lastupdateuserName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最后修改时间:" prop="flastupdatetime">
                  <el-date-picker v-model="materialData.flastupdatetime" type="date" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" disabled>
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="审核人:" prop="auditerName">
                  <el-input v-model="materialData.auditerName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核时间:" prop="faudittime">
                  <el-date-picker v-model="materialData.faudittime" type="date" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" disabled>
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="禁用人:" prop="disableuserName">
                  <el-input v-model="materialData.disableuserName" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="禁用时间:" prop="fdisabletime">
                  <el-date-picker v-model="materialData.fdisabletime" type="date" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" disabled>
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card> -->
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="!isview" type="primary" @click="saveMaterial">保存</el-button>
      <el-button v-if="!isview" @click="$emit('notRefresh')">取消</el-button>
      <el-button v-if="isview" @click="$emit('notRefresh')">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import MaterialApi from '@/api/material/MaterialApi'
import MaterialGroupApi from '@/api/material/MaterialGroupApi'
import ColorApi from '@/api/basedata/ColorApi'
export default {
  name: 'material_addEdit',
  props: {
    width: { type: String, default: '60vw' },
    fid: { type: Number, },
    fgroupid: { type: Number },
    isview: false,
    status: { type: String }
  },
  data () {
    const validategroupId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择'))
      } else {
        callback()
      }
    };
    return {
        fnumberAnable: true,
      title: '新增物料',
      isShowVisible: true,
      activeName: 'base',
      rules: {
        fname: [{ required: true, message: '请填写物料名称', tirgger: 'blur' }],
        fgroupId: [{ required: true, validator: validategroupId, tirgger: 'change' }],
        ftype: [{ required: true, message: '请填写物料名称', tirgger: 'change' }],
        fbaseunitid: [{ required: true, type: "number", message: '计量单位不能为空！', tirgger: 'change' }],
        fconvertype: [{ required: true, message: '换算类型不能为空！', tirgger: 'change' }]
      },
      materialData: { fisuseShelfLife: 0, fisuseAuxProperty: 0, fispackage: 0, fisavoidcheck: 0, fuselot: 1, fusesn: 0, fishave: 1, fsnunitid: null },
      materialList: [],
      groupTreeData: [],
      colorData: [],
      warehouseData: [],
      locationData: [],
      wareareaData: [],
      isLoading: true,
      shelfLifeUnitFilter: { fgroupnumber: "004" },
    }
  },
  async created () {
    this.isLoading = true
     await this.$NumRuleUtil.getNumber(this, "cn.hxlc.tie.demo.modular.material.model.result.MaterialResult", null, 'materialData', 'fnumberAnable', 'fnumber');
    if (this.fgroupid) {
      let materialData = this.materialData
      materialData.fgroupid = this.fgroupid
      this.materialData = materialData
    }
    if (this.fid) {
      let http = new MaterialApi() 
      if (this.fid) {
        this.title = '编辑物料'
        let materialData = await http.detail({ fid: this.fid })
        this.materialData = materialData.data
      }
    }
    this.initSelect();
    let https = new MaterialGroupApi()
    let groupTreeData = await https.queryGroupTree({})
    groupTreeData.data.forEach((item, index) => {
      if (item.nodeId === -1) {
        groupTreeData.data.splice(index, 1)
      }
    })
    
    this.groupTreeData = groupTreeData.data
    this.isLoading = false
  },
  //  mounted(){
  //   // this.isLoading = true;
  //   // this.isDataLoading = true;
  //     let that = this;
  //     that.$nextTick(function(){
  //       if(!that.$tie.isEmpty(that.materialData.fwarehouseid) && that.materialData.fwarehouseid != 0){
  //         that.$refs.warearea.refresh([{field:'fwarehouseid',value:that.materialData.fwarehouseid}])
  //       }
  //       if(!that.$tie.isEmpty(that.materialData.fwareareaid) && that.materialData.fwareareaid != 0){
  //         that.$refs.location.refresh([{field:'fwareareaid',value : that.materialData.fwareareaid}])
  //       }
  //       that.isLoading = false;
  //       // that.isDataLoading = false;
  //     });
  // },
  methods: {
    onWarehouseChange (row) {
      //先设置默认值，仓库改变时，设置自身值但不触发值改变事件
      let isClean = this.$tie.isEmpty(row);
      this.materialData.fwarehousename = null
      this.materialData.fwareareaname = null
      this.materialData.flocationname = null
      this.$refs.warehouse.defaultSelect({ fid: null, fname: null, isChange: "0" })
      this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
      this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
      if (!isClean) {
        //有值时设置自身默认值，设置库区过滤条件
        this.materialData.fwarehousename = row.fname
        this.$refs.warehouse.defaultSelect({ fid: row.fid, fname: row.fname, isChange: "0" })
        this.$refs.warearea.refresh([{ field: 'fwarehouseid', value: row.fid }])
        this.$refs.location.refresh([{ field: null, value: null }])
      } else {
        //没值时就是清空，清空设置自身为空，库区为空，库位为空，库区和库位的过滤条件为空
        this.materialData.fwarehousename = null
        this.materialData.fwareareaname = null
        this.materialData.flocationname = null
        this.$refs.warehouse.defaultSelect({ fid: null, fname: null, isChange: "0" })
        this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
        this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })

        this.$refs.warearea.refresh([{ field: null, value: null }])
        this.$refs.location.refresh([{ field: null, value: null }])
      }
    },
    onWareareaChange (row) {
    //先设置默认值，库区改变时设置自身值但不触发值改变事件，设置仓库值但不触发值改变事件
      let isClean = this.$tie.isEmpty(row);
      // this.materialData.fwarehousename = null
      this.materialData.fwareareaname = null
      this.materialData.flocationname = null
    // this.$refs.warehouse.defaultSelect({fid:null,fname:null,isChange:"0"})
      this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
      this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
      if (!isClean) {
    //有值时设置仓库、自身默认值，设置库区过滤条件
        this.materialData.fwarehousename = row.fwarehousename
        this.materialData.fwareareaname = row.fname
        this.$refs.warehouse.defaultSelect({ fid: row.fwarehouseid, fname: row.fwarehousename, isChange: "0" })
        this.$refs.warearea.defaultSelect({ fid: row.fid, fname: row.fname, isChange: "0" })
        this.$refs.warehouse.refresh([{ field: null, value: null }])
        this.$refs.warearea.refresh([{ field: 'fwarehouseid', value: row.fwarehouseid }])
        this.$refs.location.refresh([{ field: 'fwareareaid', value: row.fid }])
      } else {
    //没值时就是清空，清空设置自身值为空，库位为空，库位的过滤条件为空
        this.materialData.fwareareaname = null
        this.materialData.flocationname = null
        this.$refs.warearea.defaultSelect({ fid: null, fname: null, isChange: "0" })
        this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
        this.$refs.location.refresh([{ field: null, value: null }])
      }
    },
    onLocationChange (row) {
      //先设置默认值，库位改变时设置自身值、库区值、仓库值
      let isClean = this.$tie.isEmpty(row);
      // this.materialData.fwarehousename = null
      // this.materialData.fwareareaname = null
      this.materialData.flocationname = null
      // this.$refs.warehouse.defaultSelect({fid:null,fname:null,isChange:"0"})
      // this.$refs.warearea.defaultSelect({fid:null,fname:null,isChange:"0"})
      this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
      if (!isClean) {
        //有值时设置仓库、库区、自身默认值，不触发值更新事件，设置仓库、库区、库位过滤条件
        this.materialData.fwarehousename = row.fwarehousename
        this.materialData.fwareareaname = row.fwareareaname
        this.materialData.flocationname = row.fname
        this.$refs.warehouse.defaultSelect({ fid: row.fwarehouseid, fname: row.fwarehousename, isChange: "0" })
        this.$refs.warearea.defaultSelect({ fid: row.fwareareaid, fname: row.fwareareaname, isChange: "0" })
        this.$refs.location.defaultSelect({ fid: row.fid, fname: row.fname, isChange: "0" })
        this.$refs.warehouse.refresh([{ field: null, value: null }])
        this.$refs.warearea.refresh([{ field: 'fwarehouseid', value: row.fwarehouseid }])
        this.$refs.location.refresh([{ field: 'fwareareaid', value: row.fwareareaid }])
      } else {
        //没值时就是清空，清空自身值为空，库区为空，仓库为空，自身、库区、仓库的过滤条件为空
        // this.materialData.fwarehousename = null
        // this.materialData.fwareareaname = null
        this.materialData.flocationname = null
        // this.$refs.warehouse.defaultSelect({fid:null,fname:null,isChange:"0"})
        // this.$refs.warearea.defaultSelect({fid:null,fname:null,isChange:"0"})
        this.$refs.location.defaultSelect({ fid: null, fname: null, isChange: "0" })
        // this.$refs.warehouse.refresh([{field:null,value:null}])
        // this.$refs.warearea.refresh([{field:null,value:null}])
        // this.$refs.location.refresh([{field:null,value:null}])
      }
    },
    fconvertypeChange (name, value) {
      if (value == 'FLOATED') {
        this.materialData.fdirection = 'NONE'
        this.$refs.fdirection.changeVal('NONE');
        this.$refs.fdirection.isDisabled(true);
      } else {
        this.$refs.fdirection.isDisabled(false);
      }
    },
    fisuseShelfLifeChanged () {
      if (this.materialData.fisuseShelfLife == 0) {
        this.materialData.fshelfLife = null
        this.materialData.fshelfLifeUnitid = null
      }
    },
    fisuseAuxPropertyChanged () {
      if (this.materialData.fisuseAuxProperty == 0) {
        this.materialData.fauxProperty = ''
      }
    },
    async initSelect () {
      let colorHttp = new ColorApi();
      let colorData = await colorHttp.queryList({ fstatus: "USED" })
      this.colorData = colorData.data;
    },
    saveMaterial () {
        let materialData = this.materialData
      this.$refs['materialData'].validate((valid, object) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请耐心等待.....',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          let http = new MaterialApi()
          //若有fid证明是编辑没有则是新增
          if (this.fid) {
            materialData.fstatus = 1
            http.update(this.materialData).then(res => {
              loading.close()
              this.$tie.showSuccess(res.message)
              this.$emit('close')
            }).catch(e => {
              loading.close()
            })
          } else {
            materialData.fstatus = 0
            http.add(this.materialData).then(res => {
              loading.close()
              this.$tie.showSuccess(res.message)
              this.$emit('close')
            }).catch(e => {
              loading.close()
            })
          }
        } else {
          let validArr = []
          Object.keys(object).forEach(function (key) {
            validArr.push(key)
          });
          let validVal = "#" + validArr[0];
          document.querySelector(validVal).scrollIntoView(true);
        }
      })
      
    }, calculationVolume () {
      let length = this.materialData.flength == null ? 0 : this.materialData.flength;
      let width = this.materialData.fwidth == null ? 0 : this.materialData.fwidth;
      let height = this.materialData.fheight == null ? 0 : this.materialData.fheight;
      this.materialData.fvolume = (length * width * height).toFixed(4);
    },
    unitChange (unit) {
      if (unit != null) {
        this.materialData.fbaseunitname = unit.fname
      }
      this.materialData.fsnunitid = null
    },
    auxUnitChange (unit) {
      if (unit != null) {
        this.materialData.fauxunitname = unit.fname
      }
      this.materialData.fsnunitid = null
    },
    usesnChange () {
      if (!this.materialData.fusesn) {
        this.materialData.fsnunitid = null
      }
    }

  },
}
</script>

<style >
.fullWidth {
  width: 100%;
}
</style>

